<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>标签</title>
    <th:block th:replace="_fragments :: somehead"></th:block>
</head>

<body>
    
    <nav th:replace="_fragments :: navmenu(3)"></nav>

    <div class="fluid container m-padded-tb-large">
        <div class="ui container">
            <!-- 头部 -->
            <div class="ui top attached segment">
                <div class="ui grid middle aligned two column">
                    <div class="column">
                        <h3 class="ui header teal">标签</h3>
                    </div>
                    <div class="right aligned column">
                        共<h3 class="ui header orange m-inline-block m-text-thin" th:text="${#arrays.length(tags)}">14</h3>个
                    </div>
                </div>
            </div>
            <!-- 分类 -->
            <div class="ui attached segment m-padded-tb-large">
                <a th:href="@{/tags/{id}(id=${tag.id})}" class="ui mini left pointing label item m-padded-tb-mini m-margin-tb-tiny"
                	th:classappend="${tag.id==activeTagId} ? 'teal'" th:each="tag : ${tags}">
                    <span th:text="${tag.name}">java web</span> <div class="ui label" th:text="${#arrays.length(tag.blogs)}">13</div>
                </a> 
            </div>
           <!-- 博客列表 -->
            <div class="ui top attached teal segment">
                <div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${page.content}">
                	<div class="ui middle aligned mobile reversed stackable grid">
                		<div class="eleven wide column">
                			<h3 class="ui header"><a th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">文章标题</a></h3>
                			<p th:text="${blog.description}">文章描述文章描述</p>
							<div class="ui grid">
								<div class="row">
									<div class="eleven wide column">
									<div class="ui small horizontal link list">
										<div class="item">
											<img th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
											<div class="content">
												<a href="#" class="header" th:text="${blog.user.nickname}">BLU</a>
											</div>
										</div>
										<div class="item">
											<i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd hh:mm:ss')}">2020-07-01</span>
										</div>
										<div class="item">
											<i class="eye icon"></i> <span th:text="${blog.views}">5787</span>
										</div>
									</div>
								</div>
								<div class="right aligned five wide column">
									<a th:href="@{/types/{id}(id=${blog.type.id})}" target="_blank" class="ui label orange m-padded-tiny" th:text="${blog.type.name}">文章分类</a>
								</div>
								</div>
								
								<div class="row">
									<div class="column">
										<a th:href="@{/tags/{id}(id=${tag.id})}" class="ui teal left pointing label m-padded-mini" th:each="tag : ${blog.tags}" th:text="${tag.name}">文章标签</a>
									</div>
								</div>
							</div>
						</div>
						<div class="five wide column">
							<a th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
								<img th:src="@{${blog.firstPicture}}" alt="" class="ui rounded image">
							</a>
						</div>
					</div>
				</div>
            </div>
            
            
            
            <!-- 上一页下一页 -->
            <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
            	<div class="ui grid middle aligned two column">
            		<div class="column">
            			<a th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}" class="ui mini teal button basic">上一页</a>
            		</div>
            		<div class="right aligned column">
            			<a th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}" class="ui mini teal button basic">下一页</a>
            		</div>
            	</div>
            </div>
            
            
        </div>
    </div>
    <br>
    <br>
    
    <footer th:replace="_fragments :: footer" ></footer>

    <script>
        $('.m-menu-toggle').click(function() {
            $('.m-item').toggleClass('m-mobile-hide');
        });
    </script>
</body>

</html>